<template>
  <el-header class="cc-container-header" style="height: 53px">
    <div class="cc-container-header-left">比一比测试有限公司</div>
    <div class="cc-container-header-right">
      <img src="@/assets/image/small-talk.png" alt="">
      <span>李好好</span>

      <!-- <i
        class="el-icon-arrow-down el-icon--right"
        style="margin-right: 15px"
      ></i> -->
      <span @click="quit()">退出登录</span>
    </div>
  </el-header>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "elsHeader",
  data() {
    return {};
  },
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    ...mapMutations(["increment", "decrement"]),
    quit() {
      console.log("123");
      this.increment();
      // this.decrement();
    },
    handleClick() {},
  },
};
</script>

<style scoped lang="scss">
.cc-container-header {
  background: #ffffff;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #EEEEEE;
  &-left {
    // width: 126px;
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 20px;
  }
  &-right {
    margin-right: 34px;

    img{
      width: 31px;
      height: 31px;
      margin-right: 22px;
    }
    span:last-child{
      margin-left: 26px;
    }
  }
}
</style>
